<template>
    <i-drawer :spin-show="loading" :width="1350">
        <Form :model="data" :label-width="1" :rules="ruleValidate" ref="formImport">
            <Upload
                    type="drag"
                    :multiple="false"
                    :show-upload-list="false"
                    :on-before="before"
                    :on-success="success"
                    :headers="headers"
                    action="/api/order/list/import">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或者拖拽文件点这里</p>
            </Upload>
        </Form>

        <Alert style="margin-top: 15px;" type="error" v-if="data.error.length > 0">
            <div v-for="(item) in data.error">{{item}}</div>
        </Alert>
    </i-drawer>
</template>

<script>
    import FromSubmit from '../../../mixins/from-submit'
    import ContentDrawer from '../../../mixins/content-drawer'
    import IForm from "../../../components/content/form";
    import {$cache} from '../../../../plugins/cache'
    import IDrawer from "../../../components/content/drawer";

    let $token = $cache.get('$store/auth/token');

    export default {
        name: "index",
        components: {IDrawer, IForm},
        mixins: [FromSubmit, ContentDrawer],
        data() {
            return {
                loading: false,
                headers: {
                    'Accept': 'application/json',
                    'authorization' :  'bearer ' + $token
                },
                data: {
                    error: []
                },
                file: null,
                ruleValidate: {}
            }
        },
        methods: {
            success(response){
                this.loading = false;
                this.data = response;
                if(response.error.length === 0){
                    this.$Message.success('上传成功');
                    this.closeDrawer(false)
                }
            },
            before(){
                this.loading = true;
            }
        }
    }
</script>

<style scoped>

</style>